<template>

  <div>
    <el-menu  class="el-menu-demo" mode="horizontal">

      <el-image
        style="width: 120px; height: 40px ; float: left;margin-left: 10%;margin-top: 10px"
        src="https://sf1-scmcdn-tos.pstatp.com/goofy/bcy/image/logo-home.fff267.png">
      </el-image>

      <div style="margin-left: 2%;width: 300px ; float: left">
        <el-input placeholder="搜索COS、视频、用户..." v-model="input" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>


      <el-menu-item index="3" style="margin-left: 26%;float: left" ><i class="el-icon-house"></i>首页</el-menu-item>
      <el-menu-item index="4" style="float: left" ><i class="el-icon-bangzhu"></i>购物车</el-menu-item>
      <el-menu-item index="5"><i class="el-icon-bell"></i>消息</el-menu-item>

      <div>
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="float: left"></el-avatar>
      </div>

      <el-button type="danger" style="float: left;margin-left: 2%"><i class="el-icon-edit-outline"></i>发布</el-button>

    </el-menu>
    <!--主体-->
    <el-table :data="tableData" border stripe style="width: 80%;margin-left: 143px" >
      <el-table-column>
        <template slot-scope="scope">
            <el-checkbox v-model="scope.row.change"  @change="changebox(scope.row.change,scope.row)"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="商品id" width="100"> </el-table-column>
      <el-table-column prop="shopName" label="商品名称" width="100"> </el-table-column>
      <el-table-column prop="price" label="商品价格" width="200"></el-table-column>
      <el-table-column
        prop="pic"
        label="图片"
        width="500">
        <template slot-scope="scope">
          <img  :src="scope.row.pic" alt="" style="width: 50px;height: 50px">
        </template>
      </el-table-column>
      <el-table-column prop="num" label="商品数量" width="">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100" prop="id">
        <template slot-scope="scope">
          <i class="el-icon-plus"  @click="add(scope.row.id,scope.row.price)"></i>
          <i class="el-icon-minus" @click="del(scope.row.id,scope.row.num,scope.row.price)"></i>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="success" style="float: right;margin-right: 184px;margin-top: 40px" plain @click="submit(money)">提交购物车</el-button>
    <span style="float: right;margin-right: -31px;color: #F16622;size: 50px">费用明细：</span><span style="float: right;margin-right: -100px;margin-top: 20px;color: rgb(241, 102, 34);size: 80px;">{{this.money}} 元</span>
  </div>
</template>

<script>
  import axios from 'axios';
    export default {
        name: "shopCart",
      data() {
        return {
          tableData: [{
            id:'',
            shopName: '',
            price: '',
            pic: '',
            num:'',
            change:false
          }],
          money:0,
          input:'',
          number:0
        }

     },
     methods:{
       add:function (id,price) {
         var money=this.money
         if (money == 0) {
           axios.post("http://localhost/bcy-shopcart/shopCart/addShopCart",{sid:id}).then(res=>{
             if (res.data.code==200){
               this.findAll()
             }
           })
         }else {
           axios.post("http://localhost/bcy-shopcart/shopCart/addShopCart",{sid:id}).then(res=>{
             if (res.data.code==200){
               this.findAll()
               money=money+price
               this.money=money
             }
           })
         }
       },
       del:function (id,num,price,change) {
         var money = this.money
         if (money != 0 && num!=1) {
           axios.post("http://localhost/bcy-shopcart/shopCart/deletShopCart",{sid:id}).then(res=>{
             if (res.data.code==200){
               this.findAll();
               money=money-price
               this.money=money
             }
           })
         }
         if (money != 0&&num==1){
           if (confirm("是否删除")) {
             axios.post("http://localhost/bcy-shopcart/shopCart/deletShopCart",{sid:id}).then(res=>{
               if (res.data.code==200){
                 this.findAll();
                 this.money=money-price
               }
             })
           }else {
             return
           }

         }if (money == 0 && num == 1) {
           if (confirm("是否删除")) {
             axios.post("http://localhost/bcy-shopcart/shopCart/deletShopCart",{sid:id}).then(res=>{
               if (res.data.code==200){
                 this.findAll();
               }
             })
           }
         }else {
           axios.post("http://localhost/bcy-shopcart/shopCart/deletShopCart",{sid:id}).then(res=>{
             if (res.data.code==200){
               this.findAll();
             }
           })
         }
       },
       findAll:function () {
         axios.get("http://localhost/bcy-shopcart/shopCart/findShopCart").then(res=>{
           if (res.data.code==200){
             this.tableData=res.data.data;
           }
         })
       },
       changebox:function(val,row){
         var money = this.money
         var number = this.number
         console.log(val)
          if (val) {
            number = number+1
            this.number = number
            money = row.price*row.num+money
            this.money = money
          }else {
            number = number-1
            this.number = number
            money = money-row.price*row.num
            this.money = money
          }

       },

       submit:function (price) {
         var num= this.number
            if (num == 0) {
              alert("请选择商品")
            }else {
              axios.post("http://localhost/bcy-shopcart/shopCart/submit",{num:num,price:price}).then(res=>{
                if (res.data.code == 200) {
                  alert(res.data.message)
                  this.$router.push("/order")
                }
              })
            }
       }
     },

      mounted(){
        this.findAll();
      }
    }
</script>

<style scoped>

</style>
